import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/mousewheel';
import 'swiper/css/effect-fade';
import qstring from 'qs';
import styles from './index.module.less';
import { MenuOutlined } from '@ant-design/icons';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Button, Col, Drawer, Row, Space } from 'antd';
import { ReactComponent as LogoSvg } from '@/assets/logo1.svg';
import { EffectFade, FreeMode, Mousewheel } from 'swiper/modules';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import React, { useCallback, useEffect, useRef, useMemo, useState } from 'react';

function DrawerLayout({ visible, onClose }) {
    const direction = useMemo(() => {
        let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        if (clientWidth <= 768) {
            return 'vertical';
        } else {
            return 'horizontal';
        }
    }, []);

    return (
        <Drawer open={visible} closable={false} height={'95vh'} placement={'bottom'} className={styles['drawer-block']} onClose={onClose} styles={{ body: { padding: 0 } }}>
            {visible === 1 && (
                <Swiper style={{ height: '100vh' }} direction={direction} lazy={'true'} slidesPerView={2} freeMode={true} mousewheel={true} modules={[FreeMode, Mousewheel]}>
                    <SwiperSlide className={styles['drawer-first']}>
                        <img src={require('@/assets/tshirt-2.svg').default} alt="" />
                        <img src={require('@/assets/logo2.svg').default} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'100%'} src={require('@/assets/B001.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'70%'} src={require('@/assets/B002.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'100%'} src={require('@/assets/B003.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/B004.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/B005.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'100%'} src={require('@/assets/B006.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/B007.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/B008.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'100%'} src={require('@/assets/B009.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/B010.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'100%'} src={require('@/assets/B011.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/B012.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/B013.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/B014.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'60%'} src={require('@/assets/B015.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/B016.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'80%'} src={require('@/assets/B017.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/B018.webp')} alt="" />
                    </SwiperSlide>
                </Swiper>
            )}
            {visible === 2 && (
                <Swiper style={{ height: '100vh' }} direction={direction} lazy={'true'} slidesPerView={2} freeMode={true} mousewheel={true} modules={[FreeMode, Mousewheel]}>
                    <SwiperSlide className={styles['drawer-first']}>
                        <img src={require('@/assets/sweatshirt-2.svg').default} alt="" />
                        <img src={require('@/assets/logo2.svg').default} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'100%'} src={require('@/assets/C001.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'80%'} src={require('@/assets/C002.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'80%'} src={require('@/assets/C003.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'100%'} src={require('@/assets/C004.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'80%'} src={require('@/assets/C005.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/C006.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/C007.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'80%'} src={require('@/assets/C008.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'80%'} src={require('@/assets/C009.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'95%'} src={require('@/assets/C010.webp')} alt="" />
                    </SwiperSlide>
                </Swiper>
            )}
            {visible === 3 && (
                <Swiper style={{ height: '100vh' }} direction={direction} lazy={'true'} slidesPerView={2} freeMode={true} mousewheel={true} modules={[FreeMode, Mousewheel]}>
                    <SwiperSlide className={styles['drawer-first']}>
                        <img src={require('@/assets/bag-2.svg').default} alt="" />
                        <img src={require('@/assets/logo2.svg').default} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'100%'} src={require('@/assets/A001.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'95%'} src={require('@/assets/A002.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'50%'} src={require('@/assets/A003.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/A004.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'80%'} src={require('@/assets/A005.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'50%'} src={require('@/assets/A006.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'90%'} src={require('@/assets/A007.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'100%'} src={require('@/assets/A008.webp')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['drawer-item']}>
                        <img loading="lazy" height={'100%'} src={require('@/assets/A009.webp')} alt="" />
                    </SwiperSlide>
                </Swiper>
            )}
            <div className={styles['drawer-header']}>
                <Link to={'/home'}>
                    <Button type={'text'} onClick={onClose}>
                        CLOSE
                    </Button>
                </Link>
            </div>
        </Drawer>
    );
}

function Home() {
    const logoRef = useRef();
    const effectRef = useRef();
    const shadowRef = useRef();
    const footerRef = useRef();
    const navigate = useNavigate();
    const location = useLocation();
    const [visible, setVisible] = useState(0);
    const [swiperRef, setSwiperRef] = useState(null);
    const [menuVisible, setMenuVisible] = useState(false);

    const flag = useMemo(() => {
        let { search } = location || {};
        let objs = qstring.parse(search, { ignoreQueryPrefix: true });
        return Number(objs.flag || 0);
    }, [location]);

    const logoHandle = useCallback(() => {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        let ratio = Math.max(1.0 - scrollTop / scrollHeight / 0.2, 0.2);

        if (clientWidth <= 768) {
            logoRef.current.setAttribute('width', 100);
            logoRef.current.setAttribute('height', 49);
        } else {
            logoRef.current.setAttribute('width', 875 * ratio);
            logoRef.current.setAttribute('height', 437 * ratio);
        }
    }, []);

    const scrollHandle = useCallback(() => {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

        logoHandle();

        let yyyy = 600;

        if (clientWidth <= 576) {
            yyyy = 1200;
        } else if (clientWidth <= 768) {
            yyyy = 900;
        }

        let activeIndex = 0;
        let diff = shadowRef.current.offsetTop - clientHeight / 2;
        let beginFlag = (scrollTop - diff) / clientHeight;
        beginFlag = beginFlag <= 0 ? 0 : beginFlag;
        if (beginFlag <= 0.5) {
            activeIndex = 0;
        } else if (beginFlag <= 1.0) {
            activeIndex = 1;
        } else {
            activeIndex = 2;
        }

        if (beginFlag > 0) {
            effectRef.current.style.zIndex = 10;
        } else {
            effectRef.current.style.zIndex = -1;
        }

        swiperRef.slideTo(activeIndex, 0, false);
        swiperRef.slides.forEach((slide, index) => {
            if (index === activeIndex) {
                let value = beginFlag - activeIndex * 0.5;
                slide.style.maskSize = `${value * yyyy}%`;
            }
        });

        let footDiff = scrollTop + clientHeight - footerRef.current.offsetTop;
        if (footDiff > 0) {
            effectRef.current.style.bottom = `${footDiff}px`;
        } else {
            effectRef.current.style.bottom = '0px';
        }
    }, [logoHandle, swiperRef]);

    const menuCloseHandle = useCallback(() => {
        setMenuVisible(false);
    }, []);

    useEffect(() => {
        window.addEventListener('scroll', scrollHandle);
        window.addEventListener('resize', scrollHandle);
        return () => {
            window.removeEventListener('scroll', scrollHandle);
            window.removeEventListener('resize', scrollHandle);
        };
    }, [scrollHandle]);

    useEffect(() => {
        logoHandle();
    }, [logoHandle]);

    useEffect(() => {
        setVisible(flag);
    }, [flag]);

    const loadingChange = useCallback(() => {
        let value = 0;
        let flagvalue = true;
        let loadingobj = document.getElementById('loading');
        let loadingmask = document.getElementById('loading-mask');
        let times = setInterval(() => {
            value = value + 50;
            loadingmask.style.maskSize = `${value}%`;
            if (value >= 200 && flagvalue) {
                flagvalue = false;
                loadingobj.classList.add(styles['loading-hidden']);
            }
            if (value >= 360) {
                clearInterval(times);
                window.AOS.init({ delay: 300, duration: 600 });
            }
        }, 100);
    }, []);

    useEffect(() => {
        if (window.loadingFlag) {
            let value = 0;
            window.loadingFlag = false;
            let loadingobj = document.getElementById('loading');
            let speedobj = document.getElementById('loading-speed');
            loadingobj.style.display = 'block';
            let times = setInterval(() => {
                value = value + 1;
                speedobj.innerText = value + '%';
                if (value >= 100) {
                    loadingChange();
                    clearInterval(times);
                }
            }, 20);
        } else {
            window.AOS.init({ delay: 300, duration: 600 });
        }
    }, [loadingChange]);

    return (
        <React.Fragment>
            <header className={styles['header-block']}>
                <Row justify={'space-between'}>
                    <Col className={styles['header-left']}>
                        <div data-aos="zoom-in" className={styles['header-logo']}>
                            <LogoSvg ref={logoRef}></LogoSvg>
                        </div>
                    </Col>
                    <Col xs={0} sm={0} md={24} className={styles['header-right']}>
                        <Space size={10}>
                            <Link to={'/home'} style={{ color: flag === 0 ? '#000' : '#afafaf' }}>
                                INDEX,
                            </Link>
                            <Link to={'/home?flag=1'} style={{ color: flag === 1 ? '#000' : '#afafaf' }}>
                                T-SHIRT,
                            </Link>
                            <Link to={'/home?flag=2'} style={{ color: flag === 2 ? '#000' : '#afafaf' }}>
                                SWEATSHIRT,
                            </Link>
                            <Link to={'/home?flag=3'} style={{ color: flag === 3 ? '#000' : '#afafaf' }}>
                                BAG,
                            </Link>
                            <Link to={'/about'}>ABOUT</Link>
                        </Space>
                    </Col>
                    <Col xs={24} sm={24} md={0} className={styles['header-right']}>
                        <Button type={'text'} onClick={() => setMenuVisible(true)} icon={<MenuOutlined style={{ fontSize: 26 }} />}></Button>
                    </Col>
                </Row>
            </header>
            <main className={styles['main-block']}>
                <Row>
                    <Col xs={0} sm={0} md={24} style={{ height: 360 }}></Col>
                    <Col xs={24} sm={24} md={0} style={{ height: 80 }}></Col>
                </Row>
                <div style={{ margin: '0vw 2vw' }}>
                    <Row gutter={[30, 30]} align={'bottom'} justify={'space-between'}>
                        <Col xs={24} sm={24} md={12} lg={10}>
                            <Row gutter={[40, 20]}>
                                <Col xs={24} sm={12}>
                                    <img width={'100%'} data-aos="fade-up" src={require('@/assets/1001.webp')} alt="" />
                                </Col>
                                <Col data-aos="fade-up" xs={24} sm={12}>
                                    <div>也许生活就像一坨屎，</div>
                                    <div>是猫让我们拿起了铲子，</div>
                                    <div>重拾对抗世俗的勇气 ——Lanny</div>
                                    <div style={{ marginTop: 10 }}>Maybe life is like a pile of shit, and it’s the cat that makes us pick up the shovel, Regain the courage to fight against the world ——Lanny</div>
                                </Col>
                            </Row>
                        </Col>
                        <Col xs={24} sm={24} md={12} lg={10} xl={8}>
                            <img width={'100%'} data-aos="fade-up" src={require('@/assets/1002.webp')} alt="" />
                        </Col>
                    </Row>
                </div>
                <div style={{ margin: '0vw 2vw', paddingTop: '8vw' }}>
                    <Row gutter={[30, 30]} align={'bottom'} justify={'space-between'}>
                        <Col xs={24} sm={24} md={18} xl={{ span: 16, push: 1 }}>
                            <div data-aos="fade-right" className={styles['border-top-right']}>
                                <img width={'100%'} src={require('@/assets/1003.webp')} alt="" />
                            </div>
                        </Col>
                        <Col xs={24} sm={24} md={6} xl={5}>
                            <img width={'100%'} data-aos="fade-left" src={require('@/assets/1004.webp')} alt="" />
                        </Col>
                    </Row>
                </div>
                <div style={{ margin: '0vw 2vw', paddingTop: '8vw' }}>
                    <Row gutter={[30, 30]} align={'top'} justify={'space-between'}>
                        <Col xs={24} sm={24} md={12} xl={10}>
                            <div data-aos="fade-up" className={styles['border-bottom-left']}>
                                <img width={'100%'} src={require('@/assets/1005.webp')} alt="" />
                            </div>
                        </Col>
                        <Col xs={24} sm={24} md={10} lg={8}>
                            <div data-aos="fade-up" className={styles['border-bottom-left']}>
                                <img width={'100%'} src={require('@/assets/1006.webp')} alt="" />
                            </div>
                        </Col>
                    </Row>
                </div>
                <div style={{ margin: '-8vw 2vw 0px' }}>
                    <Row gutter={[30, 30]} align={'top'} justify={'space-between'}>
                        <Col xs={24} sm={24} md={10} style={{ paddingTop: '10vw' }}>
                            <div>猫不止一种样子，不止一种形态，不要轻易给它下定义 ——马齿</div>
                            <div style={{ marginTop: 10 }}>Cats have more than one look and form, don’t define them easily ——Machi</div>
                        </Col>
                        <Col xs={24} sm={24} md={12} lg={12} xl={{ span: 10, pull: 2 }}>
                            <div data-aos="fade-left" className={styles['border-bottom-right']}>
                                <img width={'100%'} src={require('@/assets/1007.webp')} alt="" />
                            </div>
                        </Col>
                    </Row>
                </div>
                <div style={{ margin: '-12vw 2vw 0px' }}>
                    <Row gutter={[30, 30]} align={'top'} justify={'space-between'}>
                        <Col xs={24} sm={24} md={7} lg={{ span: 6, push: 1 }}>
                            <div data-aos="fade-right" data-aos-delay="600" className={styles['border-bottom-right']}>
                                <img width={'100%'} src={require('@/assets/1008.webp')} alt="" />
                            </div>
                            <div data-aos="fade-right" data-aos-delay="900" className={styles['border-top-right']} style={{ marginTop: '6vw' }}>
                                <img width={'100%'} src={require('@/assets/1009.webp')} alt="" />
                            </div>
                            <div data-aos="fade-right" data-aos-delay="1200" style={{ marginTop: '6vw' }}>
                                <div>被生活耗尽了你的耐心和向往，但你还有很多猫要撸，还有很多漂亮衣服要穿——Xiao yu</div>
                                <div style={{ marginTop: 10 }}>Life has exhausted your patience and longing, but you still have many cats to play with and many beautiful clothes to wear -Xiao yu</div>
                            </div>
                        </Col>
                        <Col xs={24} sm={24} md={14} lg={12} xl={10} style={{ paddingTop: '16vw' }}>
                            <img data-aos="fade-left" data-aos-delay="600" width={'100%'} src={require('@/assets/1010.webp')} alt="" />
                        </Col>
                    </Row>
                </div>
            </main>
            <div ref={effectRef} className={styles['swiper-block']}>
                <Swiper style={{ height: '100vh' }} slidesPerView={1} effect={'fade'} modules={[EffectFade]} onSwiper={(swiper) => setSwiperRef(swiper)}>
                    <SwiperSlide className={styles['swiper-item']}>
                        <div className={styles['swiper-item-handle']}>
                            <img src={require('@/assets/tshirt-1.svg').default} alt="" />
                        </div>
                        <img width={'100%'} src={require('@/assets/1011.webp')} onClick={() => navigate('/home?flag=1')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['swiper-item']}>
                        <div className={styles['swiper-item-handle']}>
                            <img src={require('@/assets/sweatshirt-1.svg').default} alt="" />
                        </div>
                        <img width={'100%'} src={require('@/assets/1012.webp')} onClick={() => navigate('/home?flag=2')} alt="" />
                    </SwiperSlide>
                    <SwiperSlide className={styles['swiper-item']}>
                        <div className={styles['swiper-item-handle']}>
                            <img src={require('@/assets/bag-1.svg').default} alt="" />
                        </div>
                        <img width={'100%'} src={require('@/assets/1013.webp')} onClick={() => navigate('/home?flag=3')} alt="" />
                    </SwiperSlide>
                </Swiper>
            </div>
            <div ref={shadowRef} style={{ height: '200vh', pointerEvents: 'none' }}></div>
            <div ref={footerRef} style={{ overflow: 'hidden' }}>
                <Row gutter={[20, 20]} className={styles['footer-links']}>
                    <Col>
                        <a href="http://greenkitty.test.all-soon.com" target="_blank" rel="noreferrer">
                            TIK TOK
                        </a>
                    </Col>
                    <Col>
                        <a href="http://greenkitty.test.all-soon.com" target="_blank" rel="noreferrer">
                            RED
                        </a>
                    </Col>
                </Row>
                <div className={styles['footer-container']}>
                    <Row align={'middle'} justify={'space-between'}>
                        <Col>©Greenkitty</Col>
                        <Col>
                            <img src={require('@/assets/logo2.svg').default} alt="" />
                        </Col>
                        <Col>©Greenkitty</Col>
                    </Row>
                </div>
            </div>
            <div id="loading" className={styles['loading-block']}>
                <div id="loading-mask" className={styles['loading-mask']}></div>
                <Row align={'middle'} justify={'center'} className={styles['loading-body']}>
                    <Col>
                        <div className={styles['loading-body-left']}>LOADING</div>
                    </Col>
                    <Col style={{ width: 120 }}></Col>
                    <Col>
                        <div id="loading-speed" className={styles['loading-body-right']}>
                            0%
                        </div>
                    </Col>
                </Row>
            </div>
            <Drawer open={menuVisible} width={'80vw'} placement={'right'} onClose={menuCloseHandle}>
                <div className={styles['drawer-menu']}>
                    <p>
                        <Link to={'/home'} onClick={menuCloseHandle} style={{ color: flag === 0 ? '#000' : '#afafaf' }}>
                            INDEX
                        </Link>
                    </p>
                    <p>
                        <Link to={'/home?flag=1'} onClick={menuCloseHandle} style={{ color: flag === 1 ? '#000' : '#afafaf' }}>
                            T-SHIRT
                        </Link>
                    </p>
                    <p>
                        <Link to={'/home?flag=2'} onClick={menuCloseHandle} style={{ color: flag === 2 ? '#000' : '#afafaf' }}>
                            SWEATSHIRT
                        </Link>
                    </p>
                    <p>
                        <Link to={'/home?flag=3'} onClick={menuCloseHandle} style={{ color: flag === 3 ? '#000' : '#afafaf' }}>
                            MERCH
                        </Link>
                    </p>
                    <p>
                        <Link to={'/about'} onClick={menuCloseHandle}>
                            ABOUT
                        </Link>
                    </p>
                </div>
            </Drawer>
            <DrawerLayout visible={visible} onClose={() => navigate('/home')}></DrawerLayout>
        </React.Fragment>
    );
}

export default React.memo(Home);
